<template>
  <div class="form-index-box">
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="form.confirmPass"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请再次输出密码' }]"
      />
      <van-field
        v-model="form.yzm"
        type="text"
        name="验证码"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      />
      <div class="yzm">
        <div class="yzm-btn">
          <van-button @click.prevent="onFresh" icon="plus" size="mini"
            >刷新</van-button
          >
          <van-tag type="primary">{{ text || "加载中" }}</van-tag>
        </div>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { yzm } from "@/utils/index.js";
import http from "@/utils/request.js";
import md5 from "md5";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        confirmPass: "",
        yzm: "",
      },
      text: "",
      tiemout: null,
    };
  },
  created() {
    this.onFresh();
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      let form = JSON.parse(JSON.stringify(this.form));
      form.password = md5(form.password);
      http({
        url: "/login",
        method: "post",
        data: form,
      }).then((res) => {
        console.log(res);
      });
      http({
        url: "/list",
        method: "post",
      }).then((res) => {
        console.log(res);
      });
    },
    onFresh() {
      this.tiemout = setTimeout(() => {
        this.text = yzm();
      }, 1000);
    },
  },
  destroyed() {
    this.tiemout = null;
  },
};
</script>

<style lang="scss">
.form-index-box {
  .yzm {
    height: 1rem;
    border: 1px solid red;
  }
}
</style>
